<template>
  <div class="dashboard">
    <h2 style="margin-bottom: 20px;">数据概览</h2>
    
    <!-- 统计卡片 -->
    <el-row :gutter="16" style="margin-bottom: 20px;">
      <el-col :xs="12" :sm="6">
        <div class="stat-card">
          <div class="stat-icon user">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">总用户数</div>
            <div class="stat-value">{{ stats.userCount }}</div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="12" :sm="6">
        <div class="stat-card">
          <div class="stat-icon table">
            <el-icon><Grid /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">台桌总数</div>
            <div class="stat-value">{{ stats.tableCount }}</div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="12" :sm="6">
        <div class="stat-card">
          <div class="stat-icon order">
            <el-icon><List /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">今日订单</div>
            <div class="stat-value">{{ stats.todayOrders }}</div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="12" :sm="6">
        <div class="stat-card">
          <div class="stat-icon revenue">
            <el-icon><Money /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-title">今日收入</div>
            <div class="stat-value">¥{{ stats.todayRevenue }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="16">
      <el-col :xs="24" :lg="12">
        <div class="content-card">
          <h3 style="margin-bottom: 20px;">台桌状态分布</h3>
          <div class="table-status-chart">
            <div class="status-item">
              <div class="status-dot available"></div>
              <span>可用：{{ tableStatus.available }}台</span>
            </div>
            <div class="status-item">
              <div class="status-dot occupied"></div>
              <span>占用中：{{ tableStatus.occupied }}台</span>
            </div>
            <div class="status-item">
              <div class="status-dot maintenance"></div>
              <span>维护中：{{ tableStatus.maintenance }}台</span>
            </div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <div class="content-card">
          <h3 style="margin-bottom: 20px;">最近订单</h3>
          <div class="recent-orders">
            <div
              v-for="order in recentOrders"
              :key="order.id"
              class="order-item"
            >
              <div class="order-info">
                <div class="order-no">{{ order.order_no }}</div>
                <div class="order-desc">{{ order.title }}</div>
              </div>
              <div class="order-amount">¥{{ order.final_amount }}</div>
            </div>
            
            <div v-if="recentOrders.length === 0" class="no-data">
              暂无订单数据
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 统计数据
const stats = ref({
  userCount: 0,
  tableCount: 0,
  todayOrders: 0,
  todayRevenue: '0.00'
})

// 台桌状态
const tableStatus = ref({
  available: 0,
  occupied: 0,
  maintenance: 0
})

// 最近订单
const recentOrders = ref([])

// 获取统计数据
const getStats = async () => {
  try {
    // 模拟数据 - 实际项目中应该调用真实API
    stats.value = {
      userCount: 128,
      tableCount: 16,
      todayOrders: 24,
      todayRevenue: '2580.00'
    }
    
    tableStatus.value = {
      available: 10,
      occupied: 4,
      maintenance: 2
    }
    
    recentOrders.value = [
      {
        id: 1,
        order_no: 'BH20250826001',
        title: '1号台 - 九球桌租赁',
        final_amount: '120.00'
      },
      {
        id: 2,
        order_no: 'BH20250826002',
        title: '账户充值 - 500元套餐',
        final_amount: '500.00'
      },
      {
        id: 3,
        order_no: 'BH20250826003',
        title: '3号台 - 斯诺克桌租赁',
        final_amount: '150.00'
      }
    ]
  } catch (error) {
    console.error('获取统计数据失败:', error)
    ElMessage.error('获取统计数据失败')
  }
}

onMounted(() => {
  getStats()
})
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 20px 0;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  color: #fff;
  
  &.user {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  &.table {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }
  
  &.order {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }
  
  &.revenue {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  }
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.table-status-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  
  &.available {
    background: #67c23a;
  }
  
  &.occupied {
    background: #e6a23c;
  }
  
  &.maintenance {
    background: #f56c6c;
  }
}

.recent-orders {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 6px;
}

.order-info {
  flex: 1;
}

.order-no {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.order-desc {
  font-size: 12px;
  color: #666;
}

.order-amount {
  font-size: 16px;
  font-weight: 600;
  color: #1890ff;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 40px 0;
}

@media (max-width: 768px) {
  .stat-card {
    padding: 16px;
  }
  
  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
    margin-right: 12px;
  }
  
  .stat-value {
    font-size: 20px;
  }
}
</style>